<template>
	<card-block title="资源类别比例">
		<template slot="button">
			<router-link to="/">全部资源</router-link>
		</template>
		<template slot="content">
			<div class="type_scale" ref="typeScale"></div>
		</template>
	</card-block>
</template>

<script>
import { mapGetters } from 'vuex';
import * as echarts from 'echarts';
import cardBlock from './cardBlock';
import eleResize from 'element-resize-detector';
export default {
	enums: ['FILE_TYPE'],
	components: { cardBlock },
	props: {
		data: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			swchart: null,
			chartOption: {
				color: ['#0D6CE4', '#FA9600', '#5DE3E8', '#19B21E', '#8F05E5'],
				title: {
					text: '资源总数',
					subtext: '',
					left: '30%',
					top: '48%',
					padding: 0,
					itemGap: 0,
					textAlign: 'center',
					textVerticalAlign: 'center',
					textStyle: { lineHeight: 24 },
					subtextStyle: { color: '#f60', fontSize: 16, lineHeight: 24 }
				},
				legend: {
					right: 16,
					top: 'center',
					itemGap: 24,
					padding: 0,
					orient: 'vertical',
					formatter: name => {
						let nameArr = name.split('|');
						return (`{title|${nameArr[0]}}{value|${nameArr[1]}个}{ratio|${nameArr[2]}%}`)
					},
					textStyle: {
						rich: {
							title: {
								fontSize: 14,
							},
							value: {
								fontSize: 14,
								width: 72,
								align: 'right'
							},
							ratio: {
								fontSize: 14,
								width: 56,
								align: 'right'
							}
						}
					},
				},
				series: [
					{
						name: '类别比例',
						type: 'pie',
						width: '100%',
						clockwise: false,
						radius: ['40%', '70%'],
						center: ['30%', '50%'],
						label: { show: false },
						data: []
					}
				]
			}
		};
	},
	computed: {
		typeScaleData() {
			return this.data.typeResult || [];
		}
	},
	watch: {
		typeScaleData(arr) {
			let totalCount = 0;
			let dataArr = arr.map(item => {
				let obj = { value: Number(item.count) };
				let info = this.dictData['FILE_TYPE'].find(n => n.value === item.showType);
				obj['name'] = !info ? '其他' : info.msg;
				return obj;
			});
			dataArr.forEach(item => {
				totalCount += item.value;
			})
			this.chartOption.title.subtext = totalCount;
			this.chartOption.series[0].data = dataArr.map(item => {
				return { ...item, name: `${item.name}|${item.value}|${(item.value/totalCount*100).toFixed(2)}` }
			});
			this.$nextTick(() => {
				this.swchart.setOption(this.chartOption, true);
			});
		}
	},
	mounted() {
		this.initializeEcharts();
	},
	methods: {
		//初始化图表
		initializeEcharts() {
			this.swchart = echarts.init(this.$refs.typeScale);
			eleResize().listenTo(this.$refs.typeScale, (ele) => {
				this.$nextTick(() => {
					this.swchart.resize();
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.type_scale {
	height: 100%;
}
</style>